<!--
- Author:  LiShibin.
- Date:    2017/7/5 0005.
- File:    下拉加载更多的浮动提示
-->
<template>
  <div v-show="visible" class="pull-more-notice">
    <img src="./Prompt.png">
  </div>
</template>

<script>
  export default{
    data() {
      return {
        show2: true
      }
    },
    props: {
      show: {
        type: Boolean,
        default: function () {
          return false
        }
      }
    },
    computed: {
      visible: function () {
        return this.show && this.show2
      }
    },
    watch: {
      show: function (value) {
        if (value) {
          setTimeout(() => {
            this.show2 = true
          }, 100)
        }
      }
    },
    mounted() {
      document.addEventListener('touchend', this.hide, false)
    },
    beforeDestroy() {
      document.removeEventListener('touchend', this.hide)
    },
    methods: {
      hide() {
        this.show2 = false
//        document.removeEventListener('touchend', this.hide)
      }
    }
  }
</script>

<style lang="less">
  .pull-more-notice {
    z-index: 100;
    position: fixed;
    bottom: 4rem;
    left: 50%;
    margin-left: -2.8125rem;
    width: 5.625rem;
    height: 2rem;
    animation: myfirst 1s linear 0s infinite alternate;
    -moz-animation: myfirst 1s linear 0s infinite alternate;
    -webkit-animation: myfirst 1s linear 0s infinite alternate;
    -o-animation: myfirst 1s linear 0s infinite alternate;
    img {
      width: 100%;
    }
  }
</style>